<template>
    <div>
        <div id="title">
            <panle title="数据上报管理" content=""></panle>
        </div>
        <div id="search" class="pt20">
            <Search
                    @setSearchForm="setSearchForm"
                    @changeSearchForm="changeSearchForm"
                    @setExport="setExport"
                    :searchForm="searchForm"
                    :searchFormObject="searchFormObject"
                    :searchOptions="searchOptions"
                    :exportOptions="true"
            ></Search>
        </div>
        <div id="searchbar" class="pt20">
            <el-button size="mini" @click="init()">刷新</el-button>
        </div>

        <div id="body">
            <el-table
                    :data="tableData"
                    @selection-change="handleSelectionChange"
                    border
                    ref="container"
                    style="width: 100%"
                    v-loading="loading"
                    element-loading-text="加载中"   
            >
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column
                        :key="index"
                        v-for="(item, index) in fieldList"
                        :prop="item.field_name"
                        :label="item.show_name"
                        :min-width="item.width"
                        align="center"
                        v-if="item.is_show"
                >
                    <template slot-scope="scope">
                        <template v-if="item.field_name == 'status'">
                            <div v-if="scope.row.status == '0'">
                                <el-popover placement="top-start" trigger="hover" width="100">
                                    <p
                                            :key="errindex"
                                            style="font-size: 12px"
                                            v-for="(error, errindex) in scope.row.status_errors"
                                    >
                                        <span v-if="error != undefined">{{ error }}</span>
                                    </p>
                                    <div slot="reference">
                                        <span class="is_show">待完善</span>
                                        <i class="el-icon-warning" style="padding-left: 5px; color: red"></i>
                                    </div>
                                </el-popover>
                            </div>
                            <span class="is_show_n" v-else>合格</span>
                        </template>
                        <template v-else-if="item.field_name == 'name'">
                            {{ scope.row[item.field_name] }}
                            <span style="color:red" v-if="scope.row.screening_type == 2">(随{{scope.row.follow_up_number}})</span>
                        </template>
                        <template v-else-if="item.field_name == 'screening_type'">
                            {{ lungCancerInfo.getScreeningTypeName(scope.row.screening_type) }}
                        </template>
                        <template v-else-if="item.field_name == 'ct_objective'">
                            {{ lungCancerInfo.getCtPurposeName(scope.row.ct_objective) }}
                        </template>
                        <template v-else>{{ scope.row[item.field_name] }}</template>
                    </template>

                </el-table-column>

                <el-table-column fixed="right" label="操作" min-width="400px">
                    <template slot="header" slot-scope="scope">
                        <span>操作</span>
                        <el-popover class="upload-demo" trigger="click" width="100">
                            <div :key="index" v-for="(item, index) in fieldList">
                                <el-checkbox
                                        @change="(checked) => checkBoxStatus(checked, item)"
                                        v-if="item.is_show == 1"
                                        :checked="true"
                                >{{ item.show_name }}
                                </el-checkbox>
                                <el-checkbox
                                        @change="(checked) => checkBoxStatus(checked, item)"
                                        v-else
                                >
                                    {{ item.show_name }}
                                </el-checkbox>
                            </div>
                            <i
                                    class="el-icon-setting"
                                    slot="reference"
                                    style="padding-left: 10px"
                            ></i>
                        </el-popover>
                    </template>
                    <template #default="scope">
                        <PersButton
                                v-if="scope.row.screening_type==1"
                                :type="informedConsenButton(scope.row)"
                                size="mini"
                                label="同意书"
                                perms="data:informedConsent:button-edit"
                                @click="informedConsentEdit(scope.row)"
                        ></PersButton>
                        <PersButton
                                v-if="scope.row.screening_type==1"
                                :type="questionairesButton(scope.row)"
                                size="mini"
                                label="调查表"
                                perms="data:questionaires:button-edit"
                                @click="questionairesEdit(scope.row)"
                        ></PersButton>
                        <PersButton
                                v-if="scope.row.high_risk==1 || scope.row.screening_type==2"
                                :type="obtButton(scope.row)"
                                size="mini"
                                label="CT检查"
                                perms="data:obt:button-edit"
                                @click="obtEdit(scope.row)"
                        ></PersButton>
                        <PersButton
                            v-if="scope.row.is_lung_cancer==1"
                                :type="enteroscopeButton(scope.row)"
                                size="mini"
                                label="内镜"
                                perms="data:enteroscope:button-edit"
                                @click="enteroscopeEdit(scope.row)"
                        ></PersButton>
                        <PersButton
                            v-if="scope.row.is_lung_cancer==1"
                                :type="pathologyButton(scope.row)"
                                size="mini"
                                label="病理"
                                perms="data:pathology:button-edit"
                                @click="pathologyEdit(scope.row)"
                        ></PersButton>
                        <PersButton
                            v-if="scope.row.is_lung_cancer==1"
                                :type="stagesButton(scope.row)"
                                size="mini"
                                label="分期"
                                perms="data:pathology:button-edit"
                                @click="stagesEdit(scope.row)"
                        ></PersButton>
                        <PersButton
                                type="danger"
                                size="mini"
                                icon="el-icon-delete"
                                perms="data:data:button-del"
                                label="删除"
                                @click="del(scope.row)"
                        ></PersButton>
                      <PersButton
                          type="primary"
                          size="mini"

                          perms="data:data:button-del"
                          label="退回"
                          @click="go_back(scope.row)"
                      ></PersButton>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="page">
            <el-pagination
                    :page-sizes="['10', '20', '50', '100']"
                    :total="total"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
        </div>

        <!--用户-->
        <el-dialog
                v-dialogDrag
                :visible.sync="dialogOpen"
                width="90%"
                append-to-body
                :title="'查看'"
        >
            <create
                    v-if="dialogOpen"
                    @childByDialogVisible="childByDialogVisible"
                    :dialogStatus="dialogStatus"
                    :rowData="dataParameter"
            ></create>
        </el-dialog>

        <!--知情同意书-->
        <el-dialog
                v-dialogDrag
                :visible.sync="dialogInformedConsentOpen"
                width="90%"
                append-to-body
                :title="'查看'"
        >
            <InformedConsentCreate
                    v-if="dialogInformedConsentOpen"
                    @childByDialogVisible="childByDialogVisible"
                    :dialogStatus="dialogInformedConsentStatus"
                    :rowData="dataParameter"
            ></InformedConsentCreate>
        </el-dialog>

        <el-dialog
                v-dialogDrag
                :visible.sync="dialogEnteroscopeOpen"
                width="90%"
                append-to-body
                :title="'查看'"
        >
            <Enteroscope
                    v-if="dialogEnteroscopeOpen"
                    @childByDialogVisible="childByDialogVisible"
                    :dialogStatus="dialogEnteroscopeStatus"
                    :rowData="dataParameter"
            ></Enteroscope>
        </el-dialog>

        <el-dialog
                v-dialogDrag
                :visible.sync="dialogPathologyOpen"
                width="90%"
                append-to-body
                :title="'查看'"
        >
            <Pathology
                    v-if="dialogPathologyOpen"
                    @childByDialogVisible="childByDialogVisible"
                    :dialogStatus="dialogPathologyStatus"
                    :rowData="dataParameter"
            ></Pathology>
        </el-dialog>

        <el-dialog
                v-dialogDrag
                :visible.sync="dialogQuestionairesOpen"
                width="90%"
                append-to-body
                :title="'查看'"
        >
            <Questionaires
                    v-if="dialogQuestionairesOpen"
                    @childByDialogVisible="childByDialogVisible"
                    :dialogStatus="dialogQuestionairesStatus"
                    :rowData="dataParameter"
            ></Questionaires>
        </el-dialog>
        <el-dialog
                v-dialogDrag
                :visible.sync="dialogStagesOpen "
                width="90%"
                append-to-body
                :title="dialogStagesStatus=== 'create' ? '新增' : '修改'"
        >
            <Stages
                    v-if="dialogStagesOpen "
                    @childByDialogVisible="childByDialogVisible"
                    :dialogStatus="dialogStagesStatus"
                    :rowData="dataParameter"
            ></Stages>
        </el-dialog>

        <!--临床体检表-->
        <el-dialog
                v-dialogDrag
                :visible.sync="dialogClinicalCheckOpen"
                width="90%"
                append-to-body
                :title="'查看'"
        >
            <ClinicalCheckCreate
                    v-if="dialogClinicalCheckOpen"
                    @childByDialogVisible="childByDialogVisible"
                    :dialogStatus="dialogClinicalCheckStatus"
                    :rowData="dataParameter"
            ></ClinicalCheckCreate>
        </el-dialog>
    </div>
</template>

<script>
    import Panle from '@/components/Panle';
    import PersButton from '@/components/PersButton';
    import {fieldList, fieldUpdate} from "@/api/field/field";
    import {listData, deleteData,goBack} from '@/api/data/formal';
    import {listTask} from "@/api/task/task";
    import {allRegion} from "@/api/region/region";
    import {villageAll} from "@/api/village/village";
    import {configList} from "@/api/config/config";
    import Search from "@/components/common/search";
    import Create from "../user/create";
    import InformedConsentCreate from "../informedConsent/create";
    import Questionaires from "../questionaires/create";
    import ClinicalCheckCreate from "../clinicalCheck/create";
    import Enteroscope from "../enteroscope/create";
    import Pathology from "../pathology/create";
    import {getToken} from "@/common/token";
    import {lungCancerInfo} from "@/common/lungCancerInfo"
    import {allInstitution} from "@/api/institution/institution";
    import Stages from "../stages/create";

    let PAGE_TYPE_NAME = "dataFormal";
    export default {
        components: {
            PersButton,
            Panle,
            Search,
            Create,
            InformedConsentCreate,
            ClinicalCheckCreate,
            Questionaires,
            Enteroscope,
            Pathology,
            Stages,
            
        },
        data() {
            return {
                searchOptions: {
                    province_id: false,
                    city_id: false,
                    district_id: false,
                    town_id: false,
                    village_id: false,
                    institution_id: false,
                    name: false,
                    sfz: false,
                    ct_date:false,
                    ct_objective:false,
                },
                searchForm: lungCancerInfo.searchForm(),
                searchFormObject: [
                    {
                        label: "省份",
                        field: "province_id",
                        type: "select",
                        options: [],
                    },
                    {
                        label: "城市",
                        field: "city_id",
                        type: "select",
                        options: [],
                    },
                    {
                        label: "区县",
                        field: "district_id",
                        type: "select",
                        options: [],
                    },
                    {
                        label: "乡镇",
                        field: "town_id",
                        type: "select",
                        options: [],
                    },
                    {
                        label: "村",
                        field: "village_id",
                        type: "select",
                        options: [],
                    },
                    {
                        label: "机构名称",
                        field: "institution_id",
                        type: "select",
                        options: [],
                    },
                    {
                        label: "姓名",
                        field: "name",
                        type: "input",
                        options: {},
                    },
                    {
                        label: "身份证",
                        field: "sfz",
                        type: "input",
                        options: {},
                    },
                    {
                        label: "筛查类型",
                        field: "screening_type",
                        type: "select",
                        options: lungCancerInfo.screeningTypeAry
                    },
                    {
                        label: "CT检查目的",
                        field: "ct_objective",
                        type: "select",
                        options: lungCancerInfo.ctPurposeAry
                    },
                    {
                        label: "CT检查日期",
                        field: "ct_date",
                        type: "date",
                    },
                    {
                        label: "筛查阳性",
                        field: "is_lung_cancer",
                        type: "select",
                        options: [
                        {
                            id: 0, name: "否",
                        },{
                            id: 1, name: "是",
                        },{
                            id: 2, name: "不确定",
                        }],
                    },
                ],
                pageSize: 10, //一页显示多少条
                total: 0,
                pageNumber: 1,
                dataParameter: {},
                multipleSelection: [],
                dialogQuestionairesOpen: false,
                dialogQuestionairesStatus: "formal",
                dialogOpen: false,
                dialogStatus: "formal",
                dialogInformedConsentOpen: false,
                dialogInformedConsentStatus: "formal",
                dialogClinicalCheckOpen: false,
                dialogClinicalCheckStatus: "formal",
                dialogEnteroscopeOpen: false,
                dialogEnteroscopeStatus: "formal",
                dialogPathologyOpen: false,
                dialogPathologyStatus: "formal",
                dialogStagesStatus:"formal",
                dialogStagesOpen:false,
                fieldList: [],
                tableData: [],
                provinceList: [],
                cityList: [],
                countyList: [],
                townList: [],
                villageList: [],
                taskList: [],
                institutionList: [],
                lungCancerInfo: lungCancerInfo,
                loading: false
            };
        },
        created() {
            this.getFieldList();
            this.getProvinceList();
            this.getInstitutionList();
        },
        activated() {
            this.init();
        },
        computed: {
            informedConsenButton(row) {
                return function (row) {
                    if (row.informed_consent_status == 1) {
                        return 'success';
                    }
                    return 'warning';
                }
            },
            enteroscopeButton(row) {
                return function (row) {
                    if (row.enteroscope_status == 1) {
                        return 'success';
                    }
                    return 'warning';
                }
            },
            pathologyButton(row) {
                return function (row) {
                    if (row.pathology_status == 1) {
                        return 'success';
                    }
                    return 'warning';
                }
            },
            questionairesButton(row) {
                return function (row) {
                    if (row.questionaires && row.questionaires.questionaires_status == 1) {
                        return 'success';
                    }
                    return 'warning';
                }
            },
            obtButton(row) {
                return function (row) {
                    return 'success';
                }
            },
        },
        filters: {},
        methods: {
            stagesButton(row) {
                return 'success';
            },

            stagesEdit(row) {
                this.dialogStagesOpen = true
                this.dialogStagesStatus = 'update'
                this.dataParameter = row;
            },

            init() {
                let role = this.$store.state.member.role;
                //省级
                if (role == 7) {
                    this.searchForm.province_id = parseInt(this.$store.state.member.member.province_id);
                    this.searchOptions.province_id = true;
                } else if (role == 11) {    //市级
                    this.searchForm.province_id = parseInt(this.$store.state.member.member.province_id);
                    this.searchForm.city_id = parseInt(this.$store.state.member.member.city_id);
                    this.searchOptions.province_id = true;
                    this.searchOptions.city_id = true;
                } else if (role == 12) {    //区县级
                    this.searchForm.province_id = parseInt(this.$store.state.member.member.province_id);
                    this.searchForm.city_id = parseInt(this.$store.state.member.member.city_id);
                    this.searchForm.district_id = parseInt(this.$store.state.member.member.district_id);
                    this.searchOptions.province_id = true;
                    this.searchOptions.city_id = true;
                    this.searchOptions.district_id = true;
                } else if (role == 6 || role == 8 || role == 9 || role == 10) {
                    //筛查人员
                    this.searchForm.province_id = parseInt(this.$store.state.member.member.province_id);
                    this.searchForm.city_id = parseInt(this.$store.state.member.member.city_id);
                    this.searchForm.district_id = parseInt(this.$store.state.member.member.district_id);
                    this.searchForm.institution_id = parseInt(this.$store.state.member.institution_id);
                    this.searchOptions.province_id = true;
                    this.searchOptions.city_id = true;
                    this.searchOptions.district_id = true;
                    this.searchOptions.institution_id = true;
                }
                this.list();
            },
            list() {
                this.loading = true;
                listData(lungCancerInfo.getparm(this)).then((res) => {
                    if (res.code === 200) {
                        this.tableData = res.data.data;
                        this.total = res.data.total;
                        this.loading = false;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            exportData() {
                this.loading = true
                console.log(lungCancerInfo.getparm(this))
                fetch(this.setQueryPath(
                        process.env.VUE_APP_API + "data/FormalLibrary/dataFormalExport",
                        lungCancerInfo.getparm(this)
                    )
                ).then(res=>res.blob())
                    .then(blob=>{
                        //console.log(blob)
                        const link = document.createElement('a')
                        const url = window.URL.createObjectURL(blob)
                        link.href = url
                        link.download = '数据正式库.csv'
                        //link.setAttribute('download', '人员信息表.txt')
                        //document.body.appendChild(link)
                        link.click()
                        //link.remove()
                        this.loading = false
                    }
                ).catch(err=>{
                        console.log(err)
                        this.loading = false
                    }
                )

            //     let param = {
            //         province_id: this.searchForm.province_id,
            //         city_id: this.searchForm.city_id,
            //         district_id: this.searchForm.district_id,
            //         town_id: this.searchForm.town_id,
            //         village_id: this.searchForm.village_id,
            //         name: this.searchForm.name,
            //         sfz: this.searchForm.sfz,
            //         // institution_id: this.$store.state.member.institution_id,
            //         institution_id: this.searchForm.institution_id,
            //         uid: this.$store.state.member.uid,
            //         ct_date: this.searchForm.ct_date,
            //         ct_objective: this.searchForm.ct_objective,
            //         screening_type: this.searchForm.screening_type
            //     }
            //     console.log(this.$store.state.member)
            //    window.location.href = this.setQueryPath(process.env.VUE_APP_API + "data/formalLibrary/dataIndexExport", param);
            },
            setQueryPath(url, queryData) {
                var _str = "";
                for (var o in queryData) {
                    _str += o + "=" + queryData[o] + "&";
                }
                var _str = _str.substring(0, _str.length - 1);
                return url + '?' + _str;
            },
            getProvinceList() {
                let param = {
                    pid: 1
                }
                allRegion(param).then((res) => {
                    if (res.code === 200) {
                        this.provinceList = res.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            getCityList() {
                let param = {
                    pid: this.searchForm.province_id
                }
                allRegion(param).then((res) => {
                    if (res.code === 200) {
                        this.cityList = res.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            getCountyList() {
                let param = {
                    pid: this.searchForm.city_id
                }
                allRegion(param).then((res) => {
                    if (res.code === 200) {
                        this.countyList = res.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            //获取乡镇
            getTownList() {
                if (!this.searchForm.district_id) {
                    return false;
                }
                villageAll({pid: 0, district_id: this.searchForm.district_id}).then((res) => {
                    if (res.code == "200") {
                        this.townList = res.data;
                    }
                });
            },
            //获取村
            getVillageList() {
                if (!this.searchForm.town_id) {
                    return false;
                }
                villageAll({pid: this.searchForm.town_id}).then((res) => {
                    if (res.code == "200") {
                        this.villageList = res.data;
                    }
                });
            },
            getInstitutionList() {
                let param = {
                    institution_id: this.searchForm.institution_id,
                };
                allInstitution(param).then((res) => {
                    if (res.code === 200) {
                        this.institutionList = res.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },

            //任务
            getListTask() {
                let param = {
                    pageSize: 100,
                    page: 1,
                }
                listTask(param).then((res) => {
                    if (res.code === 200) {
                        this.taskList = res.data.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            //获取字段列表
            getFieldList() {
                fieldList({action_name: PAGE_TYPE_NAME})
                    .then((result) => {
                        this.fieldList = result.data;
                    })
                    .catch((err) => {
                        console.log("err", err);
                    });
            },
            // 当点击checkbox时改变字段显示和隐藏
            checkBoxStatus(checked, row) {
                let params = JSON.parse(JSON.stringify(row));
                params.is_show = checked ? 1 : 0;
                fieldUpdate(params)
                    .then((result) => {
                        this.getFieldList();
                    })
                    .catch((err) => {
                        console.log("err", err);
                    });
            },
            setSearchForm(searchForm) {
                this.searchForm = searchForm;
                this.init();
            },
            setExport(searchForm) {
                this.searchForm = searchForm;
                this.exportData();
            },
            changeSearchForm(searchForm) {
                this.searchForm = searchForm;
            },
            handleSizeChange(e) {
                this.pageSize = e;
                this.init();
            },
            handleCurrentChange(e) {
                this.page = e;
                this.init();
            },
            //多选
            handleSelectionChange(e) {
                let selectChang = []
                for (let item of e) {
                    selectChang.push(item.id)
                }
                this.multipleSelection = selectChang;
            },
            //知情同意书修改
            informedConsentEdit(row) {
                this.dialogInformedConsentOpen = true
                this.dialogInformedConsentStatus = 'formal'
                this.dataParameter = row;
            },
            //临床体检表修改
            obtEdit(row) {
                this.dialogClinicalCheckOpen = true
                this.dialogClinicalCheckStatus = 'formal'
                this.dataParameter = row;
            },
            questionairesEdit(row) {
                this.dialogQuestionairesOpen = true
                this.dialogQuestionairesStatus = 'formal'
                this.dataParameter = row;
            },
            //初筛及疾病史修改
            enteroscopeEdit(row) {
                this.dialogEnteroscopeOpen = true
                this.dialogEnteroscopeStatus = 'formal'
                this.dataParameter = row;
            },
            pathologyEdit(row) {
                this.dialogPathologyOpen = true
                this.dialogPathologyStatus = 'formal'
                this.dataParameter = row;
            },
            //删除
          go_back(data) {
                this.$confirm('您确定退回吗【' + data.name + '】', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                  goBack(data).then((res) => {
                        if (res.code === 200) {
                            this.msgSuccess(res.msg);
                            this.init();
                        } else {
                            this.msgError(res.msg);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

          del(data) {
            this.$confirm('确定删除【' + data.name + '】', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              deleteData(data).then((res) => {
                if (res.code === 200) {
                  this.msgSuccess(res.msg);
                  this.init();
                } else {
                  this.msgError(res.msg);
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          },
            //批量删除
            delAll() {
                if (this.multipleSelection.length < 1) {
                    this.msgError("请选择数据");
                } else {
                    let ids = this.multipleSelection.join(",");
                    this.$confirm('确定删除【' + ids + '】', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.multipleSelection.forEach((item) => {
                            deleteData({id: item}).then((res) => {
                                if (res.code === 200) {
                                    this.msgSuccess(res.msg);
                                    this.init();
                                } else {
                                    this.msgError(res.msg);
                                }
                            })
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }
            },
            //对话框点击确定后的回调事件
            childByDialogVisible(childValue, isUpdate) {
                this.dialogOpen = this.dialogInformedConsentOpen = this.dialogClinicalCheckOpen = this.dialogQuestionairesOpen
                    = this.dialogEnteroscopeOpen = this.dialogPathologyOpen = childValue
                this.dataParameter = ""
                if (isUpdate) {
                    this.init()
                }
            }
        },
        watch: {
            "searchForm.province_id"(newVal, oldVal) {
                if (oldVal !== newVal) {
                    if (newVal == "") {
                        this.searchForm.city_id = "";
                        this.searchForm.district_id = "";
                        this.searchForm.town_id = "";
                        this.searchForm.village_id = "";
                    } else {
                        this.getCityList();
                    }
                }
            },
            "searchForm.city_id"(newVal, oldVal) {
                if (oldVal !== newVal) {
                    if (newVal == "") {
                        this.searchForm.district_id = "";
                        this.searchForm.town_id = "";
                        this.searchForm.village_id = "";
                    } else {
                        this.getCountyList();
                    }
                }
            },
            "searchForm.district_id"(newVal, oldVal) {
                if (oldVal !== newVal) {
                    if (newVal == "") {
                        this.searchForm.town_id = "";
                        this.searchForm.village_id = "";
                    } else {
                        this.getTownList();
                    }
                }
            },
            "searchForm.town_id"(newVal, oldVal) {
                if (oldVal !== newVal) {
                    if (newVal == "") {
                        this.searchForm.village_id = "";
                    } else {
                        this.getVillageList();
                    }
                }
            },
            "provinceList"(newVal, oldVal) {
                if (oldVal !== newVal && typeof newVal == "object") {
                    newVal.forEach((e) => {
                        this.searchFormObject[0].options.push({id: e.id, name: e.district});
                    })
                }
            },
            "cityList"(newVal, oldVal) {
                if (oldVal !== newVal && typeof newVal == "object") {
                    this.searchFormObject[1].options = [];
                    newVal.forEach((e) => {
                        this.searchFormObject[1].options.push({id: e.id, name: e.district});
                    })
                }
            },
            "countyList"(newVal, oldVal) {
                if (oldVal !== newVal && typeof newVal == "object") {
                    this.searchFormObject[2].options = [];
                    newVal.forEach((e) => {
                        this.searchFormObject[2].options.push({id: e.id, name: e.district});
                    })
                }
            },
            "townList"(newVal, oldVal) {
                if (oldVal !== newVal && typeof newVal == "object") {
                    this.searchFormObject[3].options = [];
                    newVal.forEach((e) => {
                        this.searchFormObject[3].options.push({id: e.code, name: e.name});
                    })
                }
            },
            "villageList"(newVal, oldVal) {
                if (oldVal !== newVal && typeof newVal == "object") {
                    this.searchFormObject[4].options = [];
                    newVal.forEach((e) => {
                        this.searchFormObject[4].options.push({id: e.code, name: e.name});
                    })
                }
            },
            "institutionList"(newVal, oldVal) {
                if (oldVal !== newVal && typeof newVal == "object") {
                    newVal.forEach((e) => {
                        this.searchFormObject[5].options.push({id: e.id, name: e.institution_name});
                    })
                }
            },
        },
    }

</script>

<style lang="scss" scoped="scoped">
    #search,
    #body,
    #functional,
    #page {
        padding-top: 20px;
    }

    .el-col {
        margin-left: 15px;
    }

    .addbutton {
        margin-left: -20px;
    }

    div.el-form-item__content {
        width: 100% !important;
    }

    .is_show {
        color: red;
    }

    .is_show_n {
        color: rgb(17, 226, 63);
    }
</style>

